<template>
  <div class="personal">
    <div class="header">
      <router-link class="setting" tag="span" to="setting"></router-link>
      <div class="main">
        <span>{{personalInfo.name ? personalInfo.name.slice(0,1) : '无'}}</span>
        <div class="info">
          <h3>{{personalInfo.name || '无'}}</h3>
          <p>{{personalInfo.phone}}</p>
        </div>
        <div class="right">
          <i class="iconfont icon-fa-angle-right-copy" @click="changeUserInfo"></i>
        </div>
      </div>
    </div>
    <ul class="lists">
      <router-link tag="li" to="LoanAnnal">
        <div >
          <h3>贷款记录</h3>
          <p>{{personalInfo.loan_record}}</p>
        </div>
      </router-link>
      <router-link tag="li" to="DelayList">
        <div>
          <h3>逾期记录</h3>
          <p>{{personalInfo.overdue_record}}</p>
        </div>
      </router-link>
      <router-link tag="li" to="WaitPay">
        <div>
          <h3>待支付</h3>
          <p>{{personalInfo.wait_pay}}</p>
        </div>
      </router-link>
    </ul>
    <ul class="ul">
      <router-link tag="li" to="moneyCenter">
          <span>
          <img src="./../../assets/img/personal/dianpu.png" alt="">
        </span>
         <p>财务中心</p>
         <i class="iconfont icon-fa-angle-right-copy"></i>
      </router-link>
      <li @click="goVerified">
          <span>
          <img class="es" src="./../../assets/img/personal/shimingrenzheng(1).png" alt="">
        </span>
        <p>{{isVerified == 1 ? '已实名':'实名认证'}}</p>
        <i class="iconfont icon-fa-angle-right-copy"></i>
      </li>
      <li>
          <span>
          <img class="es2" src="./../../assets/img/personal/lianxikefu.png" alt="">
        </span>
        <p>联系客服</p>
        <i class="iconfont icon-fa-angle-right-copy"></i>
      </li>
      <!--<router-link tag="li" to="aboutus">-->
          <!--<span>-->
          <!--<img src="./../../assets/img/personal/guanyuwomen.png" alt="">-->
        <!--</span>-->
        <!--<p>关于我们</p>-->
        <!--<i class="iconfont icon-fa-angle-right-copy"></i>-->
      <!--</router-link>-->
    </ul>
  </div>
</template>
<script>
  import CONFIG from './../../config'
  import {mapState} from 'vuex'

  export default{
    data(){
      return{
        isVerified:CONFIG.isVerified,
      }
    },
    computed:mapState({
      personalInfo: state => state.user.personalInfo,
    }),
    mounted(){
         this.$indicator.open();
         this.$store.dispatch('getPersonalInfoAction').then(()=>{
           this.$indicator.close()
         }).catch(()=>{
           this.$indicator.close()
         })
    },
    methods:{
      changeUserInfo(){
        this.$router.push({path:'perfectPersonal',query:{type:'change'}});
      },
      goVerified(){
        if(this.isVerified == 0){
          this.$router.push('/perfectPersonal');
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .personal{
    width: 100%;
    height: 100%;
    .header{
      width:750px;
      background:linear-gradient(90deg,rgba(244,35,28,1),rgba(254,86,35,1));
      height: 335px;
      position: relative;
      padding: 0.1px;
      .setting{
        position: absolute;
        top:21px;
        right: 30px;
        width: 46px;
        height: 46px;
        background: url("./../../assets/img/personal/shezhi.png");
        background-size: 100% 100%;
      }
      .main{
        width: 100%;
        height: 130px;
        padding: 0 30px;
        margin: 123px 0 0 0;
        .right{
          height: 100%;
          float: right;
          display: flex;
          align-items: center;

          .iconfont{
            color: #fff;
            font-size: 32px;
            line-height: 32px;
          }
        }
        span{
          width:130px;
          height:130px;
          background:rgba(255,255,255,1);
          border-radius:50%;
          font-size:59px;
          font-weight:400;
          color:rgba(231,31,24,1);
          line-height:130px;
          float: left;
          text-align: center;
        }
        .info{
          float: left;
          margin: 0 0 0 25px;
          h3{
            max-width: 500px;
            font-size:38px;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:38px;
            margin: 28px 0 27px 0;
          }
          p{
            font-size:30px;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:30px;
            opacity:0.7;
          }
        }
      }
    }
    .lists{
      width:690px;
      height:163px;
      background:rgba(255,255,255,1);
      border-radius:10px;
      margin: -30px auto 0 auto;
      position: relative;
      li{
        width: calc(100%/3);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        float: left;
        text-align: center;
        h3{
          font-size:30px;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:30px;
          margin: 2px 0 16px 0;
        }
        p{
          font-size:48px;
          font-weight:bold;
          color:rgba(231,31,24,1);
          line-height:48px;
        }
      }
    }
    .ul{
      padding: 0 30px;
      background: #fff;
      margin: 30px 0 0 0;
      li{
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #F2F2F2;
        display: flex;
        align-items: center;
        position: relative;
        &:last-of-type{
          border-bottom: none;
        }
        span{
          width: 42px;
          height: 42px;
          float: left;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 19px 0 0;
          img{
            width: 34px;
            &.es{
              width: 42px;
            }
            &.es{
              width: 38px;
            }
          }
        }
        p{
          font-size:30px;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:42px;
          float: left;
        }
        i{
          float: right;
          color: #CCCCCC;
          font-size: 32px;
          line-height: 32px;
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
          margin: 2px 0 0 0;
        }
      }
    }
  }
</style>
